<template>
  <div class="body">
    <div class="pic" :style="picStyle"></div>
    <div class="HongKongYouth">
      <div class="association">
        <div class="Youth">{{name}}</div>
        <div class="mem108">{{number}}位成員</div>
      </div>
      <div class="grey"></div>
      <div class="association">
        <div class="MassPic"></div>
        <div class="Framework">社團簡介</div>
        <div class="Arrow" id="flip" @click="showContent"></div>
      </div>
      <transition name="slide-fade">
        <div class="association fade-box" id="panel" v-if="showPanel">
            {{content}}
        </div>
      </transition>
      <div class="grey"></div>
      <div class="association">
        <div class="associationPic"></div>
        <div class="Framework">本會架構</div>
        <div class="YouthArchitecture" @click="getStructure()">
          {{name}}架構
          <div class="cture"></div>
        </div>
      </div>
    </div>
    <div class="Council">
      <div class="FunctionClub">
        <span class="tionClub">本會動態</span>
        <span class="tionClubpic">〉</span>
      </div>
      <div class="FunctionClub">
        <span class="RoofPlacement">最新</span>
        <span class="personnel">香港青年人才交流活動</span>
        <span class="time">{{create_time}}</span>
      </div>
    </div>
    <div class="member">
      <font>活動發布</font>
      <font class="rightMore" @click="toList()">了解更多 〉</font>
    </div>
    <div class="news boxShadow">
      <div class="todeList" v-for="(li,index) in activity" :key="index" @click="details(li.aid)">
        <div class="small">
          <div class="leftPic" :style="{background: 'url(https://weyouth.vip/' + li.photo + ')'}"></div>
        </div>
        <div class="rightFont">
          <div class="title fontWeight">{{li.title}}</div>
          <div class="title lineHeight colorGrey">
            {{li.society}}
            <a class="last colorGrey">剩余席位{{li.limit}}</a>
          </div>
          <div class="title colorGrey">
            <span class="backGrey">{{li.start_time|formatDate}}</span>
            <span class="backGrey">{{li.type}}</span>
            <span class="backGrey">{{li.cost}}</span>
          </div>
          <div class="title position">
            <span class="maplog"></span>
            {{li.address}}
          </div>
        </div>
      </div>
    </div>

    <div class="member">
      <font>社團相冊</font>
      <font class="rightMore" @click="toPhotoList">了解更多 〉</font>
    </div>

    <div class="team_pic boxShadow">
      <div v-for="(photo,index) in photoData" :key="index">
        <div v-if='index < 3' class="team" :style="{background: 'url(https://weyouth.vip/' + photo.path + ')'}">
          <span>{{photo.title}}</span>
        </div>
      </div>
    </div>

    <div class="Publishing">合作夥伴</div>

    <div class="team_pic boxShadow">
      <div v-for="(key,index) in companyList" :key="index">
        <div class="team_icon Icon1" :style="{background: 'url('+ key.photo + ')'}">
          <span>{{key.name}}</span>
        </div>
      </div>
    </div>
    <div class="Publishing">Contact Us</div>
    <div class="contact_us">
      <!--<div class="tewter">-->
      <!--<img src="../style/img/6254.png" /><span>{{twitter}}</span>-->
      <!--</div>-->
      <div class="tewter">
        <img src="../style/img/contact_01.png">
        <span>{{facebook}}</span>
      </div>
      <div class="tewter">
        <img src="../style/img/contact_02.png">
        <span>{{wechat}}</span>
      </div>
      <div class="tewter">
        <img src="../style/img/6255.png">
        <span>{{address}}</span>
      </div>
      <div class="tewter">
        <img src="../style/img/contact_04.png">
        <span>{{phone}}</span>
      </div>
      <div class="tewter">
        <img src="../style/img/contact_05.png">
        <span>{{email}}</span>
      </div>
    </div>
    <div class="contact">
      <div class="us">
        <font>Share</font>
        <div class="contact01"></div>
        <div class="contact02"></div>
        <div class="contact03"></div>
        <div class="contact04"></div>
      </div>
    </div>

    <div class="footer">
      <div class="login">
        <div class="join_us bacColor" @click="isManager()">
          <div></div>
          <span>登入管理</span>
        </div>
        <div class="join_us" @click="join()">
          <div></div>
          <span>申請加入</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import { getSocietyInfo, isManager } from '@/api/society'
import { wxShare, wxReady } from '@/utils/wxShare'
import { isLogin, isBind } from '@/api/login'
export default {
  name: 'AssnDetails',
  data () {
    return {
      showPanel: false,
      number: '',
      name: '',
      create_time: '',
      activity: '',
      photoData: '',
      sid: this.$route.query.sid,
      facebook: '',
      twitter: '',
      address: '',
      wechat: '',
      phone: '',
      companyList: [],
      content: '',
      logo: '',
      email: '',
      coverPath: '',
      structure: '',
      picStyle: {
        'width': '100%',
        'min-height': '232px',
        'background-size': '100% 100%',
        'background-repeat': 'no-repeat',
        backgroundImage: ''
      }
    }
  },
  filters: {
    formatDate: function (value) {
      return value.slice(5, 10).replace('-', '月') + '日'
    }
  },
  created () {
    this.loadList()
    wxShare()
    this.share()
    // this.isManager()
  },
  methods: {
    toPhotoList () {
      this.$router.push('/photolist?sid=' + this.sid)
    },
    showContent () {
      console.log(this.showPanel)
      this.showPanel = !this.showPanel
    },
    toList () {
      this.$router.push('/activity_list?sid=' + this.$route.query.sid)
    },
    loadList () {
      getSocietyInfo({
        sid: this.sid
      }).then(res => {
        var resData = res.data
        this.name = resData.society.name
        this.content = resData.society.content
        this.logo = resData.society.logo
        this.number = resData.number
        this.create_time = resData.society.create_time
        this.activity = resData.activityList
        this.companyList = resData.companyList
        this.photoData = resData.photo
        this.facebook = resData.society.facebook
        this.twitter = resData.society.twitter
        this.address = resData.society.address
        this.wechat = resData.society.wechat
        this.phone = resData.society.phone
        this.email = resData.society.email
        this.structure = resData.society.structure
        this.picStyle.backgroundImage = 'url(https://weyouth.vip/' + resData.society.cover + ') '
        let postData = {
          url: window.location.href,
          title: resData.society.name
        }
        console.log(this.picStyle.backgroundImage)
        wx.miniProgram.postMessage({ data: JSON.stringify(postData) })
        this.share()
      })
    },
    randomNum (n) {
      var t = ''
      for (var i = 0; i < n; i++) {
        t += Math.floor(Math.random() * 10)
      }
      return t
    },
    share () {
      wxReady({
        title: this.title,
        desc: this.removeHTMLTag(this.content),
        link: location.href.split('#')[0] + '#' + location.href.split('#')[1] + '&',
        // link: `http://test.qingningmeng.top/dist/#/activity-detail?aid=${this.$route.query.aid}&sid=${this.$route.query.sid}`,
        logo: this.photoData
      })
    },
    isManager () {
      isLogin().then(res => {
        if (res.code === 0) {
          this.$router.push('/')
        } else if (res.code === 1) {
          isBind().then(res => {
            if (res.code === 0) {
              this.$router.push('/wx_bind')
            } else if (res.code === 1) {
              localStorage.setItem('isLogin', 'isLogin')
              isManager({
                sid: this.sid
              }).then(res => {
                if (res.code === 1) {
                  this.$router.push('/manage_society?sid=' + this.sid)
                } else {
                  alert('您沒有管理權限')
                }
              }).catch(err => { console.log(err) })
            }
          }).catch(err => { console.log(err) })
        }
      }).catch(err => { console.log(err) })
    },
    details (aid) {
      this.$router.push('/activity_details?aid=' + aid)
    },
    join () {
      this.$router.push('/user_info?sid=' + this.sid)
    },
    getStructure () {
      location.href = 'http://weyouth.vip/' + this.structure
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.body {
  background: rgb(255, 255, 255);
  font-family: PingFang SC;
}
.fade-box {

}
.pic {
  width: 100%;
  min-height: 160px;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

.HongKongYouth {
  background: rgb(255, 255, 255);
  border-radius: 10px;
  margin: -20px auto auto auto;
  width: 91%;
  max-height: 310px;
  border: solid 1px rgb(255, 255, 255);
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.1);
}

.association {
  background: rgb(255, 255, 255);
  margin-top: 18px;
  height: 28px;
  margin-bottom: 9px;
}

.Youth {
  float: left;
  height: 28px;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  padding-left: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 65%;
}

.grey {
  background: rgba(245, 245, 245, 1);
  height: 1px;
  margin: auto;
  width: 86%;
}

.Arrow {
  float: right;
  margin-right: 25px;
  margin-top: 11px;
  width: 10px;
  height: 20px;
  background-image: url(../style/img/down.png);
  background-repeat: no-repeat;
  background-size: contain
}

.MassPic {
  margin-top: 3px;
  float: left;
  margin-left: 24px;
  width: 13px;
  height: 14px;
  opacity: 1;
  background-image: url(../style/img/order.png);
  background-repeat: no-repeat;
  background-size: cover
}

.associationPic {
  margin-top: 3px;
  float: left;
  margin-left: 24px;
  width: 13px;
  height: 14px;
  opacity: 1;
  background-image: url(../style/img/keyboard.png);
  background-repeat: no-repeat;
  background-size: cover
}

.Framework {
  width: 19%;
  margin-left: 4px;
  height: 21px;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(22, 22, 22, 1);
  float: left;
}

.YouthArchitecture {
  float: right;
  height: 17px;
  font-size: 12px;
  line-height: 17px;
  color: rgba(119, 119, 119, 1);
}

.cture {
  margin-right: 24px;
  margin-left: 6px;
  margin-top: 2px;
  float: right;
  width: 13px;
  height: 14px;
  background-image: url(../style/img/pdf.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.Council {
  background: url(../style/img/oblong.png) no-repeat;
  height: 68px;
  width: 92%;
  margin-left: 4%;
  margin-top: 20px;
  border-radius: 10px;
  background-size: 115% 180%;
  background-position: 50% 40%;
  box-shadow: 0px 6px 16px rgba(255, 140, 119, 0.4);
}

.FunctionClub {
  width: 100%;
  float: left;
  line-height: 35px;
}

.tionClub {
  margin: 10px 0 0 24px;
  float: left;
  width: 68px;
  font-size: 17px;
  color: rgba(255, 255, 255, 1);
  line-height: 18px;
}

.tionClubpic {
  float: right;
  font-size: 14px;
  margin: 10px 25px 0 0;
  color: rgba(255, 255, 255, 1);
  line-height: 18px;
}

.RoofPlacement {
  width: 20px;
  font-size: 10px;
  color: rgba(255, 255, 255, 1);
  border: solid 1px rgb(255, 2552, 255);
  margin: 9px 3px 13px 24px;
  border-radius: 3px;
  padding: 2px 2px 1px 2px;
}

.personnel {
  margin: 7px 0 0 0;
  width: 120px;
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}

.time {
  margin: 14px 24px 0 0;
  float: right;
  height: 16px;
  font-size: 10px;
  font-weight: 400;
  line-height: 14px;
  color: rgba(255, 255, 255, 1);
  opacity: 0.8;
}

.Publishing {
  margin: 12px 0 16px 16px;
  width: 100px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(119, 119, 119, 1);
}

.todeList {
  height: 160px;
  border-bottom: solid 1px #eceef0;
  background: white;
}

.leftPic {
  width: 108%;
  height: 96%;
  float: left;
  border-radius: 5px;
  background-size: cover !important;
  margin-left: -4%
}

.small {
  width: 30%;
  height: 78%;
  margin: 4% 5% 0 5%;
  float: left;
  border-radius: 5px;
  background: rgba(240, 128, 128, .6)
}

.rightFont {
  width: 60%;
  height: 80%;
  margin-top: 5%;
  float: left;
}

.title {
  width: 100%;
  min-height: 23%;
  font-size: 13px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery_font {
  padding-top: 30px;
  padding-left: 30px;
  font-size: 23px;
  color: white;
  height: 40px;
  width: 40%;
  position: absolute;
  top: 266px;
  left: 10px;
}

.person {
  height: 20px;
  width: 70px;
  float: right;
  color: white;
  margin: 21px 0 0 0;
}

img {
  height: 20px;
  width: 20px;
  float: right;
  margin: 22px 22px 0 0;
}

.fontWeight {
  font-size: 18px;
}

.maplog {
  float: left;
  height: 10px;
  margin: 3px 3px 0 3px;
  width: 8px;
  background-image: url(../style/img/maplog.png);
  background-size: 100% 100%;
}

.lineHeight {
  line-height: 30px;
}

.last {
  float: right;
  margin-right: 10px;
}

.colorGrey {
  color: grey;
}

.rightMore {
  float: right;
  font-size: 15px;
  color: rgb(204, 204, 204)
}

/* .backIcon {
  background: url('../style/img/1.jpg') no-repeat;
  background-size: contain;
} */

.boxShadow {
  box-shadow: 0px 0px 30px #aaaaaa
}

.copyRight {
  text-align: center;
  font-size: 10px;
  width: 94%;
  margin-left: 3%;
  height: 110px;
  line-height: 170px;
  color: #aaaaaa;
  background-image: linear-gradient(rgba(245, 245, 245, 0.5), rgba(255, 255, 255, 1));
}

.colllege {
  width: 91.7%;
  margin-left: 3%;
  border-radius: 5px;
  border: solid 3px white;
  min-height: 84px;
}

.news {
  width: 91.7%;
  margin-left: 3%;
  border-radius: 10px;
  border: solid 3px white;
}

.position {
  color: rgb(204, 204, 204)
}

.backGrey {
  padding: 2px;
  border-radius: 3px;
  background: rgb(250, 249, 247)
}

.ActivityAlbum {
  margin: 20px auto auto auto;
  width: 91%;
  background: red;
}

.member {
  width: 93%;
  margin-left: 3.5%;
  margin-top: 30px;
  font-size: 14px;
  color: grey;
  margin-bottom: 20px;
}

.mem108 {
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(119, 119, 119, 1);
  float: right;
  margin: 5.5px 24px 0 0;
}

.rightMore {
  float: right;
  font-size: 14px;
  color: rgb(204, 204, 204)
}

.team {
  width: 28%;
  height: 96px;
  float: left;
  border-radius: 1px;
  margin-left: 2.1%;
  background-size: cover !important;
}

.team_icon {
  width: 70px;
  height: 70px;
  float: left;
  border-radius: 1px;
  margin-left: 8%;
  border-radius: 35px;
  background-size: cover !important;
}

.team_icon span {
  width: 70px;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: rgba(22, 22, 22, 1);
  margin-top: 75px;
  float: left;
  text-align: center;
}

.team_pic {
  width: 86.5%;
  margin-left: 3%;
  border-radius: 10px;
  height: 120px;
  padding-top: 3%;
  padding-left: 24px;
}

.contact {
  width: 100%;
  height: 144px;
  background: url(../style/img/copyright.png) no-repeat;
  margin-top: 32px;
  background-size: 100% 100%;
}

.us {
  width: 92%;
  height: 56px;
  margin-left: 3%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.1);
  border-radius: 227px;
}

.us font {
  width: 50%;
  height: 28px;
  font-size: 20px;
  font-weight: 100;
  line-height: 56px;
  color: rgba(22, 22, 22, 1);
  padding-left: 24px;
  float: left;
}

.us div {
  width: 7%;
  height: 44px;
  display: inherit;
  float: left;
  background-size: contain;
  margin-top: 15px;
  margin-left: 5px;
}

.contact01 {
  background: url(../style/img/contact_01.png) no-repeat;
}

.contact02 {
  background: url(../style/img/contact_02.png) no-repeat;
}

.contact03 {
  background: url(../style/img/contact_03.png) no-repeat;
}

.contact04 {
  background: url(../style/img/contact_04.png) no-repeat;
}

.footer {
  width: 100%;
  height: 58px;
  background: white;
  position: fixed;
  bottom: 0;
}

.login {
  width: 100%;
  height: 100%;
  float: left;
  font-size: 14px;
  font-weight: 400;
  color: rgba(119, 119, 119, 1);
  text-align: center;
}

.join_us {
  background: url(../style/img/shenqingjiaru.png);
  width: 50%;
  float: left;
  height: 100%;
  color: white;
}

.join_us div {
  background: url(../style/img/book.png) no-repeat;
  width: 15px;
  height: 15px;
  display: inherit;
  float: left;
  background-size: contain;
  margin-left: 45px;
  margin-top: 22px;
}

.join_us span {
  margin-top: 18px;
  display: inline-block;
  float: left;
  margin-left: 10px;
}

.login_menager {
  width: 50%;
  float: left;
  padding-top: 20px
}

.bacColor div {
  background: url(../style/img/login.png) no-repeat;
  background-size: contain;
}
.bacColor span {
  color: rgba(0, 0, 0, .5);
}
.team span {
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 1);
  width: 100%;
  height: 16px;
  float: left;
  text-align: center;
  margin-top: 75px;
}

.tewter {
  height: 30px;
  width: 100%;
  overflow: hidden
}

.tewter img {
  float: left;
  margin: 10px 0 0 30px;
}

.tewter span {
  padding-left: 10px;
  line-height: 38px;
  font-size: 14px;
}

.contact_us {
  width: 94%;
  margin-left: 3%;
  border-radius: 10px;
  height: 160px;
  box-shadow: 0px 0px 30px #aaaaaa;
}

.bacColor {
  background: rgb(255, 140, 119);
}
.slide-fade-enter-active {
  transition: all .1s;
}
.slide-fade-leave-active {
  transition: all .1s;
}
.slide-fade-enter,
.slide-fade-leave-to {
  height: 0;
}
#panel {
  /* display: none; */
  margin-top: 5px;
  height: 130px;
  font-size: 13px;
  color: grey;
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
}
a{
  text-decoration:none;
  color:black;
}
</style>
